<template>
  <div class="view-fill">
    <div v-if="!modifyInfo.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="二维码规则明细"
        @returnBack="returnBack"
        :btnList="fullInfo.btnList"
      >
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information
              :info="isActive === 1 ? infoList : equipmentInfoList"
            />
          </div>
        </div>

        <div class="model-panel" v-if="isActive === 1">
          <div class="model-panel-title">
            <p>{{ $t('detailInfo') }}</p>
          </div>
          <div class="model-panel-body">
            <!-- 条件栏 -->
            <page-filter
              v-model:query="filterInfo.query"
              :filter-list="filterInfo.list"
            />
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="false"
                :mergeData="tableInfo.mergeData"
                :mergeFiled="tableInfo.mergeFiled"
                :field-list="
                  isActive === 1
                    ? tableInfo.fieldList
                    : tableInfo.deviceFieldList
                "
                :handle="tableInfo.handle"
                :isDynamic="true"
                @handleEvent="handleEvent"
              ></page-table>
            </div>
          </div>
        </div>
      </NewFullScreen>
    </div>
    <addAndUpdate
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      :type="state.methodType"
      :isActive="isActive"
      :tableRow="state.tableRow"
    ></addAndUpdate>
  </div>
</template>

<script setup name="codeRuleDetail">
import PageTable from '@/components/PageTable/index'
import BasicInformation from '@/components/BasicInformation/index'
import { findQrCodeRule, findQrCodeRuleDetail } from '@/api/base.js'
import addAndUpdate from './insert.vue'
const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: function () {
      return false
    },
  },
  qrCodeId: {
    type: String,
    default: function () {
      return ''
    },
  },
  isActive: {
    type: Number,
    default: function () {
      return 1
    },
  },
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

const state = reactive({
  findQrCodeRuleDetail,
  methodType: '',
  tableRow: '',
})
const infoList = reactive({
  data: {},
  fieldList: [
    { label: '名称', value: 'name', type: 'text' },
    { label: '宽度(mm)', value: 'width', type: 'text' },
    { label: '高度(mm)', value: 'height', type: 'text' },
    { label: '二维码尺寸', value: 'qrCodeSize', type: 'text' },
    { label: '分隔符', value: 'separator', type: 'text' },
    { label: '备注', value: 'remark', type: 'text' },
  ],
})
const equipmentInfoList = reactive({
  data: {},
  fieldList: [
    { label: '名称', value: 'name', type: 'text' },
    { label: '宽度(mm)', value: 'width', type: 'text' },
    { label: '高度(mm)', value: 'height', type: 'text' },
    { label: '二维码尺寸', value: 'qrCodeSize', type: 'text' },
    { label: '分隔符', value: 'separator', type: 'text' },
    { label: '备注', value: 'remark', type: 'text' },
  ],
})

const fullInfo = reactive({
  btnList: [{ label: '修改', event: update, show: true }],
})
let productInfo = reactive({
  visible: false,
  query: {
    id: props.qrCodeId,
  },
})

// 过滤相关配置
const filterInfo = reactive({
  query: {
    sort: 'create_time desc',
    searchType: 'orderSequence',
  },
  list: [],
})

// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    { label: '产品名称', value: 'commonName' },
    { label: '产品编码', value: 'productCode' },
    { label: '生产厂家', value: 'brandName' },
    { label: '规格', value: 'standard' },
    { label: '单位', value: 'unitName' },
  ],
  deviceFieldList: [
    { label: '设备名称', value: 'name' },
    { label: '编号', value: 'code' },
    { label: '设备分类', value: 'categoryValue' },
    { label: '生产厂家', value: 'factoryValue' },
    { label: '规格/型号', value: 'standard' },
    { label: '单位', value: 'unitValue' },
  ],
})
const modifyInfo = reactive({
  visible: false,
  title: '',
  purchOrderId: '',
})

watch(
  () => modifyInfo.visible,
  (value) => {
    if (!value) {
      getList()
      getOrderInfo(props.qrCodeId)
    }
  }
)

onMounted(() => {
  getOrderInfo(props.qrCodeId)
  getList()
})

function returnBack() {
  emit('returnBack', false)
}
function update() {
  // 编辑
  state.methodType = 'edit'
  modifyInfo.visible = true
  modifyInfo.title = '修改二维码规则'
  // 显示信息
  // modifyInfo.purchOrderId = row.id
  state.tableRow = { ...infoList.data }
}
function getList() {
  tableInfo.refresh = Math.random()
}
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = [...data]
      break
  }
}
function getOrderInfo(qrCodeId) {
  findQrCodeRule(qrCodeId).then((resp) => {
    if (resp && resp.success) {
      infoList.data = resp.data
      equipmentInfoList.data = resp.data

      if (props.isActive === 1) {
        infoList.data = resp.data
        tableInfo.data = resp.data.relationProducts
      } else {
        if (resp.data.deviceDetails && resp.data.deviceDetails.length > 0) {
          let tData = []
          resp.data.deviceDetails.forEach((item) => {
            let tmp = {}
            tmp.name = item.deviceName
            tmp.code = item.deviceCode
            tmp.categoryValue = item.categoryName
            tmp.factoryValue = item.factoryName
            tmp.standard = item.standard
            tmp.unitValue = item.unitName
            tmp.deviceId = item.deviceId

            tData.push(tmp)
          })
          tableInfo.data = tData
        }
      }
    }
  })
}
</script>

<style scoped>
.left {
  width: 20% !important;
  margin-right: 10px;
  display: inline-block;
}
.right {
  width: 20% !important;
  margin-right: 60px;
  display: inline-block;
}
.el-checkbox {
  /* width: 100%; */
  display: inline-block;
  /* margin-right: 200px; */
}
.title {
  display: inline-block;
}
.lable {
  display: flex;
  margin-bottom: 10px;
}
.el-checkbox {
  margin-right: 10px;
}
</style>
